<template>
	<v-stepper class="elevation-0" v-model="stepIndex">
		<v-stepper-header class="elevation-0" style="overflow: hidden;">
			<v-row class="stepList">
				<v-col class="pl-0 colItem" v-for="(item, index) in step" :key="index" style="">
					<div class="first-box1 last-box pl-10 py-5 stepItem" :class="stepIndex > index? 'selected' : ''"
						:complete="stepIndex > index" :step="index + 1">
						{{ item }}
					</div>
				</v-col>
			</v-row>
		</v-stepper-header>

		<v-stepper-window>
			<v-stepper-window-item v-for="(item, index) in list" :key="index" :value="index + 1">
				<slot :name="index + 1"></slot>
			</v-stepper-window-item>
			<slot></slot>
		</v-stepper-window>
	</v-stepper>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

// 定义组件名称
defineOptions({
	name: "VtkStepper",
	inheritAttrs: false,
});

// 定义props
const props = defineProps({
	list: {
		type: String,
		default: null,
	},
	el: {
		type: Number,
		default: 1,
	},
});

// 响应式数据
const stepIndex = ref(props.el);
const step = ref([]);

// 监听el属性变化
watch(() => props.el, (val) => {
	stepIndex.value = val;
});

// 处理内容
const content = () => {
	if (props.list) {
		step.value = props.list.split(",");
	}
};

// 组件挂载时执行
onMounted(() => {
	content();
});

// 监听list变化
watch(() => props.list, () => {
	content();
});
</script>

<style lang="scss" scoped>
.v-stepper__step {
	background: #c7ccd538;
	position: relative;
}

.stepItem {
	align-items: center;
    display: flex;
    flex-direction: row;
    padding: 24px;
    position: relative;
	background: #c7ccd538;
	color: rgba(255, 255, 255, 0.5);
}

.stepItem.selected {
	background: #165dff;
	color: #fff !important;

	&.last-box::after {
		border-color: transparent transparent transparent #165dff;
	}

	:deep(.v-stepper__label) {
		color: #fff !important;
	}
}

// 隐藏步骤数字
:deep(.v-stepper__step__step) {
	display: none !important;
}

.colItem:first-child .first-box1::before {
	border-color: transparent !important;
}

.colItem:last-child .last-box::after {
	border-color: transparent !important;
}

.first-box::before {
	position: absolute;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	z-index: 0;
	border: 23px solid;
	border-color: transparent transparent transparent rgb(255, 255, 255);
}

.first-box1::before {
	position: absolute;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	z-index: 0;
	border: 30px solid;
	border-color: transparent transparent transparent #1e1e1e;
}

.last-box::after {
	position: absolute;
	right: -61px;
	content: "";
	z-index: 1;
	width: 0;
	height: 0;
	border: 30px solid;
	border-color: transparent transparent transparent #c7ccd538;
}

.theme--dark.v-stepper {
	background: rgba(0, 0, 0, 0);
}
</style>